<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 布局示例演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        header {
            background-color: #1890ff;
            color: white;
            padding: 30px 20px;
            text-align: center;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        .intro {
            text-align: center;
            margin-bottom: 30px;
        }
        section {
            padding: 20px;
            border-bottom: 1px solid #e8e8e8;
        }
        section:last-child {
            border-bottom: none;
        }
        h2 {
            color: #1890ff;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e8e8e8;
        }
        h3 {
            margin: 20px 0 10px;
            color: #2c3e50;
        }
        p {
            margin-bottom: 15px;
        }
        .demo-container {
            margin: 20px 0;
            background-color: #fafafa;
            padding: 20px;
            border-radius: 4px;
            overflow: hidden;
        }
        .demo-box {
            background-color: #1890ff;
            color: white;
            text-align: center;
            padding: 20px;
            border-radius: 4px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }
        .demo-box:hover {
            background-color: #40a9ff;
        }
        .demo-box:nth-child(odd) {
            background-color: #52c41a;
        }
        .demo-box:nth-child(odd):hover {
            background-color: #73d13d;
        }
        .demo-box:nth-child(3n) {
            background-color: #faad14;
        }
        .demo-box:nth-child(3n):hover {
            background-color: #ffc53d;
        }
        .demo-box:nth-child(4n) {
            background-color: #f5222d;
        }
        .demo-box:nth-child(4n):hover {
            background-color: #ff4d4f;
        }
        .demo-box:nth-child(5n) {
            background-color: #722ed1;
        }
        .demo-box:nth-child(5n):hover {
            background-color: #9254de;
        }
        .code-block {
            background-color: #f6f8fa;
            padding: 15px;
            border-radius: 4px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.9rem;
            overflow-x: auto;
            margin: 15px 0;
            border: 1px solid #e1e4e8;
        }
        .code-block code {
            white-space: pre;
        }
        /* 基本网格布局 */
        .basic-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        /* 响应式网格布局 */
        .responsive-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        /* 跨度布局 */
        .span-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        .span-item-1 {
            grid-column: span 2;
        }
        .span-item-2 {
            grid-row: span 2;
        }
        /* 自动填充布局 */
        .auto-fill-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }
        /* 嵌套网格布局 */
        .nested-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 15px;
        }
        .nested-inner {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        /* 基于线的定位布局 */
        .line-based-grid {
            display: grid;
            grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [col3-end];
            grid-template-rows: [row1-start] auto [row2-start] auto [row3-start] auto [row3-end];
            gap: 15px;
        }
        .line-item-1 {
            grid-column: col1-start / col3-start;
            grid-row: row1-start;
        }
        .line-item-2 {
            grid-column: col3-start;
            grid-row: row1-start / row3-start;
        }
        /* 命名区域布局 */
        .named-areas-grid {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: 
                "header header"
                "sidebar content"
                "footer footer";
            gap: 15px;
            height: 400px;
        }
        .area-header {
            grid-area: header;
            background-color: #1890ff;
        }
        .area-sidebar {
            grid-area: sidebar;
            background-color: #52c41a;
        }
        .area-content {
            grid-area: content;
            background-color: #faad14;
        }
        .area-footer {
            grid-area: footer;
            background-color: #f5222d;
        }
        /* 媒体查询，确保响应式效果 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            .container {
                border-radius: 4px;
            }
            h1 {
                font-size: 2rem;
            }
            .named-areas-grid {
                grid-template-columns: 1fr;
                grid-template-areas: 
                    "header"
                    "content"
                    "sidebar"
                    "footer";
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Grid 布局示例演示</h1>
            <p class="intro">现代 CSS 布局技术的强大展示</p>
        </header>

        <section id="basic-grid">
            <h2>1. 基本网格布局</h2>
            <p>最基础的 Grid 布局，将容器划分为固定数量的列，并在这些列中放置项目。</p>
            <div class="demo-container">
                <div class="basic-grid">
                    <div class="demo-box">项目 1</div>
                    <div class="demo-box">项目 2</div>
                    <div class="demo-box">项目 3</div>
                    <div class="demo-box">项目 4</div>
                    <div class="demo-box">项目 5</div>
                    <div class="demo-box">项目 6</div>
                </div>
            </div>
            <div class="code-block">
                <code>.basic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}</code>
            </div>
        </section>

        <section id="responsive-grid">
            <h2>2. 响应式网格布局</h2>
            <p>使用 auto-fit 和 minmax 创建自适应容器宽度的响应式网格，确保在各种屏幕尺寸上都有良好的表现。</p>
            <div class="demo-container">
                <div class="responsive-grid">
                    <div class="demo-box">响应式项目 1</div>
                    <div class="demo-box">响应式项目 2</div>
                    <div class="demo-box">响应式项目 3</div>
                    <div class="demo-box">响应式项目 4</div>
                    <div class="demo-box">响应式项目 5</div>
                </div>
            </div>
            <div class="code-block">
                <code>.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}</code>
            </div>
        </section>

        <section id="span-grid">
            <h2>3. 跨度布局</h2>
            <p>通过设置项目跨越多个列或行，创建更复杂的布局结构。</p>
            <div class="demo-container">
                <div class="span-grid">
                    <div class="demo-box span-item-1">跨越 2 列</div>
                    <div class="demo-box">项目 2</div>
                    <div class="demo-box">项目 3</div>
                    <div class="demo-box span-item-2">跨越 2 行</div>
                    <div class="demo-box">项目 5</div>
                    <div class="demo-box">项目 6</div>
                </div>
            </div>
            <div class="code-block">
                <code>.span-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.span-item-1 {
    grid-column: span 2;
}
.span-item-2 {
    grid-row: span 2;
}</code>
            </div>
        </section>

        <section id="auto-fill-grid">
            <h2>4. 自动填充布局</h2>
            <p>使用 auto-fill 创建能够根据可用空间自动调整列数的网格，即使项目数量不足也会保持网格结构。</p>
            <div class="demo-container">
                <div class="auto-fill-grid">
                    <div class="demo-box">自动填充 1</div>
                    <div class="demo-box">自动填充 2</div>
                    <div class="demo-box">自动填充 3</div>
                    <div class="demo-box">自动填充 4</div>
                </div>
            </div>
            <div class="code-block">
                <code>.auto-fill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}</code>
            </div>
        </section>

        <section id="nested-grid">
            <h2>5. 嵌套网格布局</h2>
            <p>在一个网格容器内部嵌套另一个网格容器，创建更复杂的嵌套布局结构。</p>
            <div class="demo-container">
                <div class="nested-grid">
                    <div class="demo-box">主项目 1</div>
                    <div class="nested-inner">
                        <div class="demo-box">嵌套项目 1</div>
                        <div class="demo-box">嵌套项目 2</div>
                        <div class="demo-box">嵌套项目 3</div>
                        <div class="demo-box">嵌套项目 4</div>
                    </div>
                </div>
            </div>
            <div class="code-block">
                <code>.nested-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
}
.nested-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}</code>
            </div>
        </section>

        <section id="line-based-grid">
            <h2>6. 基于线的定位布局</h2>
            <p>使用网格线名称进行精确的项目定位，提供更精细的布局控制。</p>
            <div class="demo-container">
                <div class="line-based-grid">
                    <div class="demo-box line-item-1">从第 1 列到第 3 列</div>
                    <div class="demo-box line-item-2">从第 1 行到第 3 行</div>
                    <div class="demo-box">项目 3</div>
                    <div class="demo-box">项目 4</div>
                </div>
            </div>
            <div class="code-block">
                <code>.line-based-grid {
    display: grid;
    grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [col3-end];
    grid-template-rows: [row1-start] auto [row2-start] auto [row3-start] auto [row3-end];
    gap: 15px;
}
.line-item-1 {
    grid-column: col1-start / col3-start;
    grid-row: row1-start;
}
.line-item-2 {
    grid-column: col3-start;
    grid-row: row1-start / row3-start;
}</code>
            </div>
        </section>

        <section id="named-areas-grid">
            <h2>7. 命名区域布局</h2>
            <p>使用命名区域创建语义化的布局结构，使布局更易于理解和维护。</p>
            <div class="demo-container">
                <div class="named-areas-grid">
                    <div class="demo-box area-header">头部区域</div>
                    <div class="demo-box area-sidebar">侧边栏区域</div>
                    <div class="demo-box area-content">内容区域</div>
                    <div class="demo-box area-footer">页脚区域</div>
                </div>
            </div>
            <div class="code-block">
                <code>.named-areas-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
    gap: 15px;
    height: 400px;
}</code>
            </div>
        </section>
    </div>
</body>
</html>